import React, { Component } from 'react';

import { HOME } from '@/config/url';
import styles from './index.module.scss';


export default class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
        };
    }

    componentDidCatch(error, errorInfo) {
        this.setState({ hasError: true });
    }

    render() {
        const {hasError} = this.state || {};

        if (hasError) {
            return (
                <div className={styles['container']}>
                    <div>
                        <img src="/images/page_error.svg" alt="" />
                    </div>
                    <h2>页面有点异常喔~~~</h2>
                    <ul style={{fontSize: 12,fontWeight:'bold', listStyle: 'sci'}}>
                        <div>可能是以下原因：</div>
                        <li style={{fontWeight: 400, margin: '2px 0 2px 12px'}}>服务有过更新 - 可以刷新页面后重试</li>
                        <li style={{fontWeight: 400, margin: '2px 0 2px 12px'}}>资源缓存问题 - 可以清除缓存后重试</li>
                        <li style={{fontWeight: 400, margin: '2px 0 2px 12px'}}>服务出现异常 - 可以联系客服沟通</li>
                        <li style={{fontWeight: 400, margin: '2px 0 2px 12px'}}>数据出现异常 - 可以联系客服沟通</li>
                    </ul>
                    <div style={{marginTop: 24}}>
                        <button onClick={e => {location.href = HOME}}>返回首页</button>
                        <button onClick={e => {location.reload()}}>刷新</button>
                    </div>
                </div>
            );
        }

        return this.props.children;
    }
}
